import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { cartlistAction } from "store/actions/carts";
import { withRouter } from "react-router-dom";
import { getProductInfo } from "network/Home";
import "./index.less";

function index({ list, history, cartlistAction }) {
    const { ptKey } = history.location.state;

    const [productInfo, setProductInfo] = useState({});

    useEffect(async () => {
        const {
            data: { templateInfo },
        } = await getProductInfo({
            channelId: null,
            isWholeSale: 0,
            memberKey: "",
            ptKey: ptKey.toString(),
        });
        setProductInfo(templateInfo);
    }, []);
    console.log(productInfo);

    // 添加购物车按钮
    const addCartClick = () => {
        const { ptKey, name, listImages, retailPrice } = productInfo;
        const data = {
            id: ptKey,
            name: name,
            img: listImages,
            price: retailPrice,
            num: 1,
        };

        cartlistAction(data);
    };

    return (
        <div className="product-detail-container">
            <img src={productInfo.listImages} alt="" className="banner-img" />
            <div>
                <span>￥</span>
                <span>{productInfo.retailPrice}</span>
                <span>/{productInfo.soldUnit}</span>
                <span>{"￥" + productInfo.origPrice}</span>
            </div>
            <div>已售{productInfo.sold + productInfo.unit}</div>
            <button onClick={addCartClick}>添加购物车</button>
        </div>
    );
}

const mapStateToProps = ({ cartlist }) => {
    return { list: cartlist };
};

export default connect(mapStateToProps, {
    cartlistAction,
})(withRouter(index));
